import { Vue, Component, Prop } from 'vue-property-decorator';
import { VNode } from 'vue';
import { PanelController } from '../../panel-controller';
import { PanelContentProvider } from '../../interface';
import { panel } from '../../panel-global';
import { SortableEvent } from 'sortablejs';
import './material-area.less';

/**
 *
 *
 * @author chitanda
 * @date 2022-02-16 18:02:53
 * @export
 * @class MaterialArea
 * @extends {Vue}
 */
@Component
export class MaterialArea extends Vue {
  @Prop()
  panel!: PanelController;

  providers: PanelContentProvider[] = [];

  dragOptions = {
    group: {
      name: 'x',
      pull: 'clone',
      put: false,
    },
  };

  created(): void {
    this.providers = panel.getAllProvider();
  }

  render(): VNode {
    return (
      <div ref='root' class='material-area'>
        <draggable group={this.dragOptions.group} sort={false}>
          {this.providers.map(provider =>
            this.$createElement(provider.materialComponent, { attrs: { 'provider-type': provider.type } }),
          )}
        </draggable>
      </div>
    );
  }
}
